<div class="m-player" [@showHide]="showPlayer" appClickoutside [bindFlag]="bindFlag"
    (onClickOutSide)="onClickOutSide($event)" (mouseenter)="togglePlayer('show')" (mouseleave)="togglePlayer('hide')"
    (@showHide.start)="animating = true" (@showHide.done)="onAnimateDone($event)">
    <div class="lock" (click)="isLocked = !isLocked">
        <div class="left"><i [class.locked]="isLocked"></i></div>
    </div>
    <div class="hand"></div>
    <div class="container">
        <div class="wrap">
            <div class="btns">
                <i class="prev" (click)="onPrev(currentIndex - 1)"></i>
                <i class="toggle" [class.playing]="playing" (click)="onToggle()"></i>
                <i class="next" (click)="onNext(currentIndex + 1)"></i>
            </div>
            <div class="head">
                <img [src]="picUrl" alt>
                <i class="mask"></i>
            </div>
            <div class="play">
                <div class="words clearfix">
                    <p class="ellipsis margin-bottom-none">{{currentSong?.name}}</p>
                    <ul class="songs clearfix margin-bottom-none">
                        <li *ngFor="let item of currentSong?.ar; last as isLast">
                            <a>{{item.name}}</a>
                            <span [hidden]="isLast">/</span>
                        </li>
                    </ul>
                </div>
                <div class="bar">
                    <div class="slider-wrap">
                        <app-wy-slider [bufferOffset]="bufferPercent" [(ngModel)]="percent"
                            (wyOnAfterChange)="onPercentChange($event)"></app-wy-slider>
                    </div>
                    <span class="time"><em>{{currentTime | formatTime}}</em>/ {{duration | formatTime}}</span>
                </div>
            </div>

            <div class="oper">
                <i class="like" title="收藏"></i>
                <i class="share" title="分享"></i>
            </div>
            <div class="ctrl">
                <i class="volume" title="音量" (click)="toggleVolumePanel()"></i>
                <i [ngClass]="currentMode.type" [title]="currentMode.label" (click)="changeMode()"></i>
                <p nz-tooltip [nzTooltipTitle]="controlTooltip.title" [nzTooltipVisible]="controlTooltip.show"
                    nzTooltipClassName="tip-bg" class="open" (click)="toggleListPanel()">
                    <span></span>
                </p>

                <div class="control-vol" [hidden]="!showVolumnPanel">
                    <app-wy-slider [wyVertical]="true" [(ngModel)]="volume" (ngModelChange)="onVolumeChange($event)">
                    </app-wy-slider>
                </div>
            </div>

            <app-wy-player-panel [playing]="playing" [songList]="songList" [currentSong]="currentSong"
                [show]="showPanel" (onClose)="showPanel = false" (onChangeSong)="onChangeSong($event)"
                (onDeleteSong)="onDeleteSong($event)" (onClearSong)="onClearSong()">
            </app-wy-player-panel>
        </div>
    </div>

    <audio
        #audio
        [src]="currentSong?.url"
        (canplay)="onCanplay()"
        (timeupdate)="onTimeUpdate($event)"
        (ended)="onEnded()"
        (error)="onError()"
    >
    </audio>
</div>